<template>
  <div class="m-header">
    <div class="back-icon">
      <i class="iconfont icon-houtui" style="font-size: 25px"></i>
    </div>
    <div class="close-window">返回</div>
    <h1 class="text">{{headerTxt}}</h1>
  </div>
</template>

<script type="es6">
  import {mapGetters} from "vuex"

  export default {
    computed: {
      ...mapGetters([
        'headerTxt'
      ])
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../base/variable.styl"
  @import "../base/mixin.styl"
  $h = 40px
  $w = 40px
  .m-header {
    position: relative
    height: $h
    line-height $h
    text-align: center
    color: $color-white
    background-color: $color-theme
    padding 0 100px
    .text {
      no-wrap()
    }
    .back-icon {
      position absolute
      left 0
      top: 0
      width $w
      height: $h
    }
    .close-window {
      position absolute
      left 38px
      top: 0
      line-height 44px
      width $w
      height: $h
    }
  }

</style>
